<template>
  <div style="border-bottom:1px solid #eee">
    
    <div class="panel-container">
      <van-row type="flex" align="center" justify="space-between" >
        <van-col><b class="L-text L-bold-text">{{itemdata.title}}</b></van-col>
        <van-col style="text-align:right">
        </van-col>
      </van-row>
    </div>

    <div ref="chart" style="height:250px;"></div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";


const router = useRouter();
const route = useRoute();

const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

const chart = ref(null);

onMounted(() => {
  initChart();
});

const show = ref(false);

const currentCondition = ref("");
const completedata = ref([]);

function initChart() {
  let chartDom = chart.value;

  let myChart = echarts.init(chartDom);
  const {itemdata} = props

  var innerr = itemdata.innerr;
  var outerr = itemdata.outerr;
  var rosetype = itemdata.rosetype;

  const options = {
    center: ["150%", "20%"],
    // legend: {
    //   orient: 'horizontal',
    //   // left: 10,
    //   x: 'center',      // 图例在左（left）、右（right）、居中（center）、100px
    //   y: 'bottom'

    // },
    tooltip: {
      trigger: "item",
    },
    grid: {
      left: "-100%",
      // top: '10%',
      // containLabel: true
    },
    toolbox: {
      feature: {
        restore: {
          show: false,
        },
        // 各工具配置项
        dataView: {
          show: false,
          readOnly: false,
          optionToContent: function (opt) {
            var series = props.itemdata.pvalue;
            var table = '<table class="layui-table"><tbody>';
            for (var i = 0, l = series.length; i < l; i++) {
              table +=
                '<tr class="">' +
                '<td class="">' +
                series[i].name +
                "</td>" +
                '<td class="">' +
                series[i].value +
                "</td>" +
                "</tr>";
            }
            table += "</tbody></table>";
            return table;
          },
        },
        saveAsImage: {
          show: false,
        }, // 保存为图片

        showTitle: true,
      },
    },

    series: [
      {
        type: "pie",
        radius: [innerr + "%", outerr + "%"], // 内半径   外半径

        data: itemdata.pvalue,
        itemStyle: {
          borderRadius: 6,
          borderColor: "#fff",
          borderWidth: 2,
        },
        emphasis: {
          // 高亮
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  myChart.setOption(options);
}

function onSelect(item) {
  show.value = false;
  currentCondition.value = item.name;

  getData(item.value, item.name);
}
// function showComplete(item) {
//   router.push({
//     name: "showcomplete",
//     query: { item: this.alldata, currentdep: this.depvalue },
//   });
// }




</script>
<style  scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  /* background: #000; */
}

.echart-box {
  width: 150px;
  height: 150px;
  /* border: 3px solid pink; */
  /* margin: 20px auto; */
}
</style>
